<form id='myupload' action='http://localhost:8080/uploadSign' method='post' enctype='multipart/form-data'>
  <div class="demo">
    <div class="btn">
      <span>��Ӹ���</span>
      <input id="fileupload" type="file" name="file1"></div>
    <div class="progress">
      <span class="bar"></span>
      <span class="percent">0%</span></div>
    <!-- ��ʾ���ϴ����ļ��� -->
    <div class="files"></div>
    <!-- ��ʾ���ϴ���ͼƬ-->
    <div class="showimg"></div>
  </div>
  <input type="submit" onclick="gosubmit2()" /></form>
<script src="https://cdn.bootcss.com/jquery/1.6.4/jquery.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery.form/4.1.0/jquery.form.min.js"></script>
<script type="text/javascript">var bar = $('.bar'); //������
  var percent = $('.percent'); //��ȡ�ϴ��ٷֱ�
  var showimg = $('.showimg'); //��ʾͼƬ��div
  var progress = $('.progress'); //��ʾ���ȵ�div
  var files = $('.files'); //�ļ��ϴ��ؼ���inputԪ��
  var btn = $('.btn span'); //��ť�ı�
  function gosubmit2() {
    $("#myupload").ajaxSubmit({
      dataType: 'json',
      //������������
      beforeSend: function() {
        showimg.empty();
        progress.show();
        var percentVal = '0%';
        bar.width(percentVal);
        percent.html(percentVal);
        btn.html('�ϴ���..');
      },
      //���½������¼��������
      uploadProgress: function(event, position, total, percentComplete) {
        var percentVal = percentComplete + '%';
        bar.width(percentVal);
        percent.html(percentVal);
      },
      success: function(data) { //ͼƬ�ϴ��ɹ�ʱ
        //��ȡ�������˷��ص��ļ�����
        alert(data.name + "," + data.pic + "," + data.size);
      },
      error: function(xhr) {
          btn.html(�ϴ�ʧ��)
          bar.width('0');
        files.html(xhr.responseText);
      }
    });;;;
  }</script>